<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <title>登录主界面</title>
    <link href="<%=basePath%>css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script type="text/javascript"  src="<%=basePath%>js/echarts.min.js"> </script>
    <script type="text/javascript">
        $(function(){
            $.ajax({
                url:"<%=basePath%>userState",
                dataType : "json",
                //编码设置
                contentType : "application/json;charset=utf-8",
                success : function(data) {
                    createPie(data);
                    createBar(data);
                },
                error:function(msg){
                    alert("后台服务器出错，请联系系统管理员");
                }
            });

        });
        function createPie(data) {//data：接口返回的数据-JSON对象
            var piedom = document.getElementById("pies");
            var myChart = echarts.init(piedom); //echarts对象实例化
            var option = {
                title: { //图形标题
                    text: "按职称统计系统医生数量",
                    subtext: '',
                    x: 'center'
                },
                tooltip: {//提示信息
                    trigger: 'item',
                    formatter: "{a} <br/>{b}:{c} ({d}%)"
                },
                legend: {//图例
                    orient: 'horizontal',
                    top: 40
                },
                toolbox: {//工具箱
                    show: false,
                    feature: {
                        mark: false,
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line', 'bar', 'pie', 'gauge']
                        },
                        restore: true
                    }
                },
                calculable: true,
                //   formatter: '{b}:{c}人 ({d}%)'
                series: [{
                    name: "医生数量",
                    type: "pie",
                    radius: '50%',
                    center: ['50%', '50%'],
                    data: data.doctors,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{c}人'
                            }
                        },
                        labelLine: {
                            label: {
                                show: true
                            }
                        },
                        emphasis: {
                            shadowBlur: 50,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            myChart.setOption(option);
        }
        function createBar(data) {
            var bardom = document.getElementById("bars");
            var myChart = echarts.init(bardom);
            var length = data.user.length;
            var role = new Array(length);
            var count = new Array(length);
            for(i =0;i<length;i++){
                role[i] =  data.user[i].role;
                count[i] = data.user[i].count;
            }
            var option = {
                title: {
                    text: "按角色统计系统用户数量",
                    subtext: '',
                    x: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: role,
                    axisLabel:{
                        color:'#6c706f',
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value'
                },
                tooltip:{

                },
                series: [
                    {
                        data: count,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                // 随机显示
                                color: function (d) {
                                    return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
                                }
                            }
                        },
                    }
                ]
            };
            myChart.setOption(option);
        }
    </script>
    <style type="text/css">
        body {
            background:#FFF
        }
        #bars{
            position: absolute;
            left:380px;
            top:10px;
        }
    </style>
</head>
<body style="background:#f1f7fa">
  <div id="graphWrap">
      <div class="clearfix">
          <div id="pies" style="width: 280px;height:380px;"></div>
          <div id="bars" style="width: 400px;height:320px"></div>
      </div>
      <div id="grapLines">
          <div id="lines" style="width: 1000px;height:350px;"></div>
      </div>
  </div>
</body>
</html>
